29-avgust, 2025O'zbek

React-ning useContext hook-i bo'yicha to'liq qo'llanma. Kengaytiriladigan ilovalar uchun kontekstdan foydalanish va unumdorlikni optimallashtirish texnikalari.

React useContext: Kontekstdan foydalanishni o'zlashtirish va unumdorlikni optimallashtirish

React-ning Context API-si komponentlar daraxtining har bir darajasi orqali propslarni aniq o'tkazmasdan komponentlar o'rtasida ma'lumotlarni almashishning kuchli usulini taqdim etadi. useContext hook-i kontekst qiymatlarini ishlatishni soddalashtiradi, bu esa funksional komponentlar ichida umumiy ma'lumotlarga kirish va ulardan foydalanishni osonlashtiradi. Biroq, useContext-dan noto'g'ri foydalanish, ayniqsa, katta va murakkab ilovalarda unumdorlik muammolariga olib kelishi mumkin. Ushbu qo'llanma kontekstdan foydalanishning eng yaxshi amaliyotlarini o'rganadi va samarali hamda kengaytiriladigan React ilovalarini ta'minlash uchun ilg'or optimallashtirish texnikalarini taqdim etadi.

React-ning Context API-sini tushunish

useContext-ga sho'ng'ishdan oldin, keling, Context API-ning asosiy tushunchalarini qisqacha ko'rib chiqaylik. Context API uchta asosiy qismdan iborat:

Kontekst: Umumiy ma'lumotlar uchun konteyner. Siz kontekstni React.createContext() yordamida yaratasiz.
Provider (Ta'minlovchi): Kontekst qiymatini o'zining avlod komponentlariga taqdim etadigan komponent. Provider ichiga o'ralgan barcha komponentlar kontekst qiymatiga kira oladi.
Consumer (Iste'molchi): Kontekst qiymatiga obuna bo'ladigan va kontekst qiymati o'zgarganda qayta render qilinadigan komponent. useContext hook-i funksional komponentlarda kontekstdan foydalanishning zamonaviy usulidir.

useContext Hook-i bilan tanishuv

useContext hook-i - bu funksional komponentlarga kontekstga obuna bo'lish imkonini beruvchi React hook-i. U kontekst obyektini (React.createContext() tomonidan qaytarilgan qiymatni) qabul qiladi va o'sha kontekst uchun joriy kontekst qiymatini qaytaradi. Kontekst qiymati o'zgarganda, komponent qayta render qilinadi.

Mana oddiy misol:

Oddiy misol

Aytaylik, sizda mavzu (theme) konteksti bor:


import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  const value = {
    theme,
    toggleTheme,
  };

  return (
    
      {children}
    
  );
}

function ThemedComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    
      Current Theme: {theme}
      
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

Ushbu misolda:

ThemeContext React.createContext('light') yordamida yaratilgan. Standart qiymat 'light'.
ThemeProvider o'zining ichidagi komponentlarga mavzu qiymatini va toggleTheme funksiyasini taqdim etadi.
ThemedComponent joriy mavzu va toggleTheme funksiyasiga kirish uchun useContext(ThemeContext)-dan foydalanadi.

Umumiy xatolar va unumdorlik muammolari

useContext kontekstdan foydalanishni soddalashtirsa-da, ehtiyotkorlik bilan ishlatilmasa, unumdorlik muammolarini ham keltirib chiqarishi mumkin. Mana ba'zi umumiy xatolar:

Keraksiz qayta renderlar: useContext-dan foydalanadigan har qanday komponent, kontekst qiymatining o'zi ishlatmaydigan qismi o'zgargan bo'lsa ham, kontekst qiymati o'zgarganda qayta render qilinadi. Bu, ayniqsa, tez-tez yangilanadigan kontekst qiymatlariga ega katta ilovalarda keraksiz qayta renderlarga va unumdorlik muammolariga olib kelishi mumkin.
Katta hajmdagi kontekst qiymatlari: Agar kontekst qiymati katta obyekt bo'lsa, ushbu obyekt ichidagi har qanday xususiyatning o'zgarishi barcha iste'molchi komponentlarning qayta render qilinishiga sabab bo'ladi.
Tez-tez yangilanishlar: Agar kontekst qiymati tez-tez yangilansa, bu komponentlar daraxti bo'ylab qayta renderlar kaskadiga olib kelishi va unumdorlikka ta'sir qilishi mumkin.

Unumdorlikni optimallashtirish texnikalari

Ushbu unumdorlik muammolarini yumshatish uchun quyidagi optimallashtirish texnikalarini ko'rib chiqing:

1. Kontekstni ajratish

Barcha bog'liq ma'lumotlarni bitta kontekstga joylashtirish o'rniga, kontekstni kichikroq, batafsilroq kontekstlarga ajrating. Bu ma'lumotlarning ma'lum bir qismi o'zgarganda qayta render qilinadigan komponentlar sonini kamaytiradi.

Misol:

Foydalanuvchi profili ma'lumotlari va foydalanuvchi sozlamalarini o'z ichiga olgan bitta UserContext o'rniga, har biri uchun alohida kontekstlar yarating:


import React, { createContext, useContext, useState } from 'react';

const UserProfileContext = createContext(null);
const UserSettingsContext = createContext(null);

function UserProfileProvider({ children }) {
  const [profile, setProfile] = useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
  });

  const updateProfile = (newProfile) => {
    setProfile(newProfile);
  };

  const value = {
    profile,
    updateProfile,
  };

  return (
    
      {children}
    
  );
}

function UserSettingsProvider({ children }) {
  const [settings, setSettings] = useState({
    notificationsEnabled: true,
    theme: 'light',
  });

  const updateSettings = (newSettings) => {
    setSettings(newSettings);
  };

  const value = {
    settings,
    updateSettings,
  };

  return (
    
      {children}
    
  );
}

function ProfileComponent() {
  const { profile } = useContext(UserProfileContext);

  return (
    
      Name: {profile?.name}
      Email: {profile?.email}
    
  );
}

function SettingsComponent() {
  const { settings } = useContext(UserSettingsContext);

  return (
    
      Notifications: {settings?.notificationsEnabled ? 'Enabled' : 'Disabled'}
      Theme: {settings?.theme}
    
  );
}

function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

Endi, foydalanuvchi profilidagi o'zgarishlar faqat UserProfileContext-dan foydalanadigan komponentlarni qayta render qiladi va foydalanuvchi sozlamalaridagi o'zgarishlar faqat UserSettingsContext-dan foydalanadigan komponentlarni qayta render qiladi.

2. React.memo bilan memoizatsiya

Kontekstdan foydalanadigan komponentlarni React.memo bilan o'rab oling. React.memo - bu funksional komponentni memoizatsiya qiluvchi yuqori tartibli komponent. Agar komponentning propslari o'zgarmagan bo'lsa, u qayta renderlarning oldini oladi. Kontekstni ajratish bilan birgalikda bu keraksiz qayta renderlarni sezilarli darajada kamaytirishi mumkin.

Misol:


import React, { useContext } from 'react';

const MyContext = React.createContext(null);

const MyComponent = React.memo(function MyComponent() {
  const { value } = useContext(MyContext);

  console.log('MyComponent rendered');

  return (
    
      Value: {value}
    
  );
});

export default MyComponent;

Ushbu misolda, MyComponent faqat MyContext-dagi value o'zgargandagina qayta render qilinadi.

3. useMemo va useCallback

Kontekst qiymatlari sifatida uzatiladigan qiymatlar va funksiyalarni memoizatsiya qilish uchun useMemo va useCallback-dan foydalaning. Bu kontekst qiymati faqat asosiy bog'liqliklar o'zgargandagina o'zgarishini ta'minlaydi va iste'molchi komponentlarning keraksiz qayta render qilinishini oldini oladi.

Misol:


import React, { createContext, useState, useMemo, useCallback, useContext } from 'react';

const MyContext = createContext(null);

function MyProvider({ children }) {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  const contextValue = useMemo(() => ({
    count,
    increment,
  }), [count, increment]);

  return (
    
      {children}
    
  );
}

function MyComponent() {
  const { count, increment } = useContext(MyContext);

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
      
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

Ushbu misolda:

useCallback increment funksiyasini memoizatsiya qiladi, uning faqat bog'liqliklari o'zgarganda o'zgarishini ta'minlaydi (bu holda, uning bog'liqliklari yo'q, shuning uchun u cheksiz memoizatsiya qilinadi).
useMemo kontekst qiymatini memoizatsiya qiladi, uning faqat count yoki increment funksiyasi o'zgarganda o'zgarishini ta'minlaydi.

4. Selektorlar

Iste'molchi komponentlar ichida kontekst qiymatidan faqat kerakli ma'lumotlarni ajratib olish uchun selektorlarni joriy qiling. Bu komponentlarning faqat ular bog'liq bo'lgan ma'lumotlar o'zgargandagina qayta render qilinishini ta'minlab, keraksiz qayta renderlar ehtimolini kamaytiradi.

Misol:


import React, { createContext, useContext } from 'react';

const MyContext = createContext(null);

const selectCount = (contextValue) => contextValue.count;

function MyComponent() {
  const contextValue = useContext(MyContext);
  const count = selectCount(contextValue);

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
    
  );
}

export default MyComponent;

Ushbu misol soddalashtirilgan bo'lsa-da, real hayotiy stsenariylarda, ayniqsa, katta kontekst qiymatlari bilan ishlaganda, selektorlar yanada murakkab va samaraliroq bo'lishi mumkin.

5. O'zgarmas ma'lumotlar tuzilmalari

O'zgarmas ma'lumotlar tuzilmalaridan foydalanish kontekst qiymatidagi o'zgarishlar mavjud obyektlarni o'zgartirish o'rniga yangi obyektlar yaratishini ta'minlaydi. Bu React uchun o'zgarishlarni aniqlashni va qayta renderlarni optimallashtirishni osonlashtiradi. Immutable.js kabi kutubxonalar o'zgarmas ma'lumotlar tuzilmalarini boshqarishda yordam berishi mumkin.

Misol:


import React, { createContext, useState, useMemo, useContext } from 'react';
import { Map } from 'immutable';

const MyContext = createContext(Map());

function MyProvider({ children }) {
  const [data, setData] = useState(Map({
    count: 0,
    name: 'Initial Name',
  }));

  const increment = () => {
    setData(prevData => prevData.set('count', prevData.get('count') + 1));
  };

  const updateName = (newName) => {
    setData(prevData => prevData.set('name', newName));
  };

  const contextValue = useMemo(() => ({
    data,
    increment,
    updateName,
  }), [data]);

  return (
    
      {children}
    
  );
}

function MyComponent() {
  const contextValue = useContext(MyContext);
  const count = contextValue.get('count');

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

Ushbu misolda kontekst ma'lumotlarini boshqarish uchun Immutable.js-dan foydalanilgan bo'lib, har bir yangilanish yangi o'zgarmas Map yaratishini ta'minlaydi, bu esa React-ga qayta renderlarni yanada samaraliroq optimallashtirishga yordam beradi.

Haqiqiy hayotdan misollar va qo'llash holatlari

Context API va useContext turli real hayotiy stsenariylarda keng qo'llaniladi:

Mavzuni boshqarish: Avvalgi misolda ko'rsatilganidek, ilova bo'ylab mavzularni (yorug'/qorong'u rejim) boshqarish.
Autentifikatsiya: Foydalanuvchi autentifikatsiya holati va foydalanuvchi ma'lumotlarini kerakli komponentlarga taqdim etish. Masalan, global autentifikatsiya konteksti foydalanuvchining tizimga kirishi, chiqishi va profil ma'lumotlarini boshqarishi mumkin, bu esa uni prop drilling-siz butun ilova bo'ylab ochiq qiladi.
Til/Mahalliy sozlamalar: Xalqarolashtirish (i18n) va mahalliylashtirish (l10n) uchun joriy til yoki mahalliy sozlamalarni ilova bo'ylab almashish. Bu komponentlarga kontentni foydalanuvchining afzal ko'rgan tilida ko'rsatish imkonini beradi.
Global konfiguratsiya: API endpoint-lari yoki funksiya bayroqlari kabi global konfiguratsiya sozlamalarini almashish. Bu ilova xatti-harakatini konfiguratsiya sozlamalariga qarab dinamik ravishda sozlash uchun ishlatilishi mumkin.
Xarid savatchasi: Elektron tijorat ilovasi bo'ylab xarid savatchasi holatini boshqarish va savatchadagi mahsulotlar hamda amallarga kirishni ta'minlash.

Misol: Xalqarolashtirish (i18n)

Keling, xalqarolashtirish uchun Context API-dan foydalanishning oddiy misolini ko'rib chiqaylik:


import React, { createContext, useState, useContext, useMemo } from 'react';

const LanguageContext = createContext({
  locale: 'en',
  messages: {},
});

const translations = {
  en: {
    greeting: 'Hello',
    description: 'Welcome to our website!',
  },
  fr: {
    greeting: 'Bonjour',
    description: 'Bienvenue sur notre site web !',
  },
  es: {
    greeting: 'Hola',
    description: '¡Bienvenido a nuestro sitio web!',
  },
};

function LanguageProvider({ children }) {
  const [locale, setLocale] = useState('en');

  const setLanguage = (newLocale) => {
    setLocale(newLocale);
  };

  const messages = useMemo(() => translations[locale] || translations['en'], [locale]);

  const contextValue = useMemo(() => ({
    locale,
    messages,
    setLanguage,
  }), [locale, messages]);

  return (
    
      {children}
    
  );
}

function Greeting() {
  const { messages } = useContext(LanguageContext);

  return (
    {messages.greeting}
  );
}

function Description() {
  const { messages } = useContext(LanguageContext);

  return (
    {messages.description}
  );
}

function LanguageSwitcher() {
  const { setLanguage } = useContext(LanguageContext);

  return (
    
      
      
      
    
  );
}

function App() {
  return (
    
      
      
      
    
  );
}

export default App;

Ushbu misolda:

LanguageContext joriy til (locale) va xabarlarni taqdim etadi.
LanguageProvider til holatini boshqaradi va kontekst qiymatini taqdim etadi.
Greeting va Description komponentlari tarjima qilingan matnni ko'rsatish uchun kontekstdan foydalanadi.
LanguageSwitcher komponenti foydalanuvchilarga tilni o'zgartirish imkonini beradi.

useContext-ga alternativlar

useContext kuchli vosita bo'lsa-da, u har doim ham har bir holatni boshqarish stsenariysi uchun eng yaxshi yechim emas. Quyida ko'rib chiqish mumkin bo'lgan ba'zi alternativlar mavjud:

Redux: JavaScript ilovalari uchun bashorat qilinadigan holat konteyneri. Redux, ayniqsa, yirik ilovalarda murakkab ilova holatini boshqarish uchun mashhur tanlovdir.
MobX: Oddiy, kengaytiriladigan holatni boshqarish yechimi. MobX holatni boshqarish uchun kuzatiladigan ma'lumotlar va avtomatik reaktivlikdan foydalanadi.
Recoil: React uchun holatni boshqarish kutubxonasi bo'lib, holatni boshqarish uchun atomlar va selektorlardan foydalanadi. Recoil Redux yoki MobX-ga qaraganda batafsilroq va samaraliroq bo'lish uchun ishlab chiqilgan.
Zustand: Soddalashtirilgan flux tamoyillaridan foydalangan holda kichik, tez va kengaytiriladigan minimalistik holatni boshqarish yechimi.
Jotai: Atomik modelga ega React uchun primitiv va moslashuvchan holatni boshqarish.
Prop Drilling: Komponentlar daraxti sayoz bo'lgan oddiyroq holatlarda, prop drilling maqbul variant bo'lishi mumkin. Bu propslarni komponentlar daraxtining bir necha darajalari orqali pastga uzatishni o'z ichiga oladi.

Holatni boshqarish yechimini tanlash ilovangizning o'ziga xos ehtiyojlariga bog'liq. Qaror qabul qilishda ilovangizning murakkabligi, jamoangizning hajmi va unumdorlik talablarini inobatga oling.

Xulosa

React-ning useContext hook-i komponentlar o'rtasida ma'lumotlarni almashishning qulay va samarali usulini taqdim etadi. Potentsial unumdorlik muammolarini tushunib, ushbu qo'llanmada keltirilgan optimallashtirish texnikalarini qo'llash orqali siz kengaytiriladigan va yuqori unumdorlikka ega React ilovalarini yaratish uchun useContext kuchidan foydalanishingiz mumkin. Kerak bo'lganda kontekstlarni ajratishni, komponentlarni React.memo bilan memoizatsiya qilishni, kontekst qiymatlari uchun useMemo va useCallback-dan foydalanishni, selektorlarni joriy qilishni va keraksiz qayta renderlarni minimallashtirish hamda ilovangiz unumdorligini optimallashtirish uchun o'zgarmas ma'lumotlar tuzilmalaridan foydalanishni unutmang.

Kontekstdan foydalanish bilan bog'liq har qanday muammolarni aniqlash va hal qilish uchun doimo ilovangiz unumdorligini tahlil qiling. Ushbu eng yaxshi amaliyotlarga rioya qilish orqali siz useContext-dan foydalanishingiz silliq va samarali foydalanuvchi tajribasiga hissa qo'shishini ta'minlashingiz mumkin.